import { Component } from 'react';
import styles from './index.less';
import { connect } from 'dva';
import router from 'umi/router';
@connect(({ redPkgList }) => ({ ...redPkgList }))
class regPkgList extends Component {
  componentDidMount() {
    this.props.dispatch({
      type: 'redPkgList/getAllRedPkgListEff'
    });
  }
  state = {
    showRegPkgModal: false,
    redPkgOpened: false,
    showGetFailModal: false
  };
  onGetRegPkg = currentRedPkg => {
    let { dispatch, hasGeted } = this.props;
    dispatch({
      type: 'redPkgList/save',
      payload: { currentRedPkg }
    });
    dispatch({
      type: 'redPkgList/checkHasGetRedPkgEff',
      id: currentRedPkg.id,
      callback: (hasGeted, canGet) => {
        console.log('​regPkgList -> hasGeted', hasGeted);
        if (!hasGeted) {
          if(canGet){
            this.setState({
              showRegPkgModal: true
            });
          }else{
            this.setState({
              showGetFailModal: true
            });
          }

        } else {
          router.push('/redPkgRecord');
        }
      }
    });
  };
  onOpenRegPkg = id => {
    this.setState({ redPkgOpened: true });
    this.props.dispatch({
      type: 'redPkgList/getRedPkgEff',
      id
    });
  };
  goToRedPkgRecord = () => {
    router.push('/redPkgRecord')
  }
  render() {
    const { redPkgList, currentRedPkg } = this.props;
    console.log('​regPkgList -> render -> redPkgList', redPkgList);
    const { showRegPkgModal, redPkgOpened, showGetFailModal } = this.state;
    const RedPkgModal = props => {
      return (
        <div className={styles.back_box}>
          <div className={styles.hobao_back}>
            <img className={styles.jndh_hobao} src={require('src/assets/nigedandan.png')} alt="" />

            <div className={styles.yuan_back}>
              <img className={styles.toxi_yuan} src={require('src/assets/icon.png')} alt="" />
              <p className={styles.span_yuan}>精天</p>
            </div>
            <div className={styles.gaod_back} onClick={this.onOpenRegPkg.bind(this, props.id)}>
              {/* <label className={styles.nrhc_gaod}>
              <input className={styles.checkbox} type="checkbox" />
              <div className={styles.zuan_gaod}> */}
              <img
                className={styles.img_A_zuan + ' ' + (props.redPkgOpened ? styles.open : '')}
                src={require('src/assets/liuzi.png')}
                alt=""
              />
              {/* <!-- <img className={styles.img_B_zuan" src={require("src/assets="" /> --> */}
              {/* </div>
            </label> */}
            </div>
            <div className={styles.jilu_back}>
              <span className={styles.soqi_jilu} href="" onClick={this.goToRedPkgRecord}>
                看看大家的手气>>
              </span>
            </div>
            <div className={styles.shu_box}>
              <span className={styles.span_shu}>{props.total_money}</span>
            </div>
          </div>
        </div>
      );
    };
    const GetFailModal = props => (
      <div className={styles.mele_box}>
        <div className={styles.moku_mele}>
            <img className={styles.imgs_moku} src={require("src/assets/holaole.png")} alt="" />
            <div className={styles.baci_moku}>
                <img className={styles.imge_baci} src={require("src/assets/icon.png")} alt="" />
                <p className={styles.nice_baci}>精天</p>
            </div>
            <div className={styles.shom_moku}>
                <p className={styles.pwen_shom}>手慢了，红包分没了</p>
            </div>
            <div className={styles.daji_moku}>
                <span className={styles.kaka_daji} onClick={this.goToRedPkgRecord}>看看大家的手气></span>
            </div>
        </div>
    </div>
    )
    return (
      <div className={styles.container+' '+styles.leib_box}>
        {redPkgList.map((redPkg, index) => (
          <div className={styles.hoba_leib} key={index} onClick={this.onGetRegPkg.bind(this, redPkg)}>
            <img className={styles.imgs_hoba} src={require("src/assets/xiaoho.png")} alt="" />
            <p className={styles.daji_hoba}>恭喜发财，大吉大利</p>
            <span className={styles.chak_hoba} href="">
              查看红包
            </span>
            <p className={styles.nius_hoba}>精天邀请你来瓜分红包</p>
          </div>
        ))}
        {showRegPkgModal && <RedPkgModal {...currentRedPkg} redPkgOpened={redPkgOpened} />}
        {showGetFailModal && <GetFailModal />}
      </div>
    );
  }
}
export default regPkgList;
